<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">Base64</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="inputData"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">图片转Base64：</label>
            <div class="form-field">
              <input
                @change="handleChangeFile" class="form-input" type="file"
                accept="image/png,image/jpeg,image/jpg,image/gif,image/bmp" />
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输出文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="outputData"></textarea>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="pull-left">
            <a class="btn btn-theme mr-md" @click="toBase64">加密</a>
            <a class="btn btn-success" @click="solveBase64">解密</a>
          </div>
          <div class="pull-right">
            <span class="form-inline">
              <SwitchRich v-model="isPipe" label="覆盖输入" />
            </span>
            <Pipe name="base64" :operation="{inputData: outputData}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import '@vendor//base64/1.0.0/base64.min.js'
import { filer } from '@daelui/dogjs/dist/components'
import Pipe from '../index/pipe.vue'

/* 加密与解密 */
export default {
  components: {
    SwitchRich,
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      isPipe: false
    }
  },

  methods: {
    /**
     * @function base64加密
    */
    toBase64 () {
      this.outputData = window.btoa(this.inputData)
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function base64解密
    */
    solveBase64 () {
      this.outputData = window.atob(this.inputData)
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    handleChangeFile (e) {
      let file = e.target.files[0]
      filer.fileToBase64(file).then(result => {
        this.outputData = result
        // 是否管道操作
        if (this.isPipe === true) {
          this.inputData = this.outputData
        }
      })
    }
  },

  mounted () {
    // 管道数据
    if (this.$store.state.inputData) {
      this.inputData = this.$store.state.inputData
      this.$store.state.inputData = ''
    }
    // 初始处理
    this.toBase64()
  }
}
</script>

<style lang="less">

</style>
